<template>
  <view class="grid-item" @tap="$emit('click')">
    <view class="grid-item-content">
      <view :class="['icon-wrapper', colorClass]">
        <tool-icon :type="type" />
      </view>
      <text class="item-title">{{ title }}</text>
      <text class="item-subtitle">{{ subtitle }}</text>
    </view>
  </view>
</template>

<script>
import ToolIcon from '@/components/ToolIcon/ToolIcon.vue';

export default {
  name: 'ToolCard',
  components: {
    ToolIcon
  },
  props: {
    type: {
      type: String,
      required: true
    },
    title: {
      type: String,
      required: true
    },
    subtitle: {
      type: String,
      required: true
    }
  },
  computed: {
    colorClass() {
      const colorMap = {
        anniversary: 'pink',
        memo: 'purple',
        diary: 'yellow',
        accounting: 'blue',
        schedule: 'green'
      };
      return colorMap[this.type];
    }
  },
  emits: ['click']
}
</script>

<style>
.grid-item {
  width: 48%;
  margin-bottom: 30rpx;
  border-radius: 50rpx;
  overflow: hidden;
}

.grid-item-content {
  background-color: #FFFFFF;
  border-radius: 50rpx;
  padding: 40rpx 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 6rpx 10rpx rgba(119, 102, 231, 0.08);
  height: 100%;
}

.icon-wrapper {
  width: 120rpx;
  height: 120rpx;
  border-radius: 30rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 30rpx;
}

.pink {
  background-color: rgba(254, 116, 139, 0.1);
}

.purple {
  background-color: rgba(119, 102, 231, 0.1);
}

.yellow {
  background-color: rgba(255, 205, 0, 0.1);
}

.blue {
  background-color: rgba(81, 139, 241, 0.1);
}

.green {
  background-color: rgba(30, 189, 133, 0.1);
}

.item-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333333;
  margin-bottom: 10rpx;
}

.item-subtitle {
  font-size: 28rpx;
  color: #666666;
}
</style>